
<template>
    <div class="editor-container">
		<div v-html="value" v-if="disabled" style="width: 100%;"></div>
        <div :id="ueditorKey" class="editor" v-else></div>
    </div>
</template>
<script>
import { ref, onMounted,getCurrentInstance,onBeforeUnmount}  from 'vue'
import { loadJsResource } from './util'
export default {
	  props:{
		value: {
		  type: String,
		  default:"",
		},
		disabled: {
		  type: Boolean,
		  default:false,
		}
	  },
    setup() {
		const { proxy } = getCurrentInstance();
		let ueditorKey = 'editor'+new Date().getTime()
		if(proxy.disabled){
			return
		}
        const editorContainer = ref(null);
		let editorInstance = null; 
        onMounted(()=>{
            if(!window.UE) {
                const scripts = ['lib/ueditor/ueditor.config.js','lib/ueditor/ueditor.all.js'];
                loadJsResource(scripts, process.env.VUE_APP_API_URL).then(()=>{
                    if(window.UE) {
                        editorInstance = window.UE.getEditor(editorContainer.value);
                    }
                })
            } else {
                if(!editorInstance) {
                    editorInstance = window.UE.getEditor(ueditorKey);
					editorInstance.ready(()=>{
						setTimeout(()=>{
							editorInstance.setContent(proxy.value)
						},1000)
						editorInstance.addListener('contentChange',(editor)=>{
							proxy.$emit('input',editorInstance.getContent())
						})
					})
                }
            }
        })
		onBeforeUnmount(()=>{
			if(proxy.disabled){
				return
			}
			window.UE.delEditor(ueditorKey);
		})
        const getContent = () => {
            console.log(editorInstance.getContent())
        }
		const setContent = () => {
		    console.log(editorInstance.getContent())
		}
        return {
            editorContainer,
            getContent,
			ueditorKey
        }
    }
}
</script>
<style  lang="less">
.editor {
    width: 100%;
    min-height: 500px;
}
.editor-container{
	td,th{
	    padding: 5px 10px;
	    border: 1px solid #DDD;
	}
}
</style>
